<template>
  <div class="login-warp">
    <div class="login-card">
      <p class="login-title">助农系统</p>
      <!--登录-->
      <a-form
          v-show="!isRegister"
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onLogin"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="账号"
            name="account"
            :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input v-model:value="formState.account"/>
        </a-form-item>

        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>


        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%" size="large">登录系统</a-button>
        </a-form-item>

        <a-form-item name="remember" style="text-align: right">
          <a-button type="link" @click="isRegister = true">还没有账号，去注册</a-button>
        </a-form-item>
      </a-form>


      <!--注册-->
      <a-form
          v-show="isRegister"
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onRegister"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            label="用户账号"
            name="account"
            :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input v-model:value="formState.account"/>
        </a-form-item>
        <a-form-item
            label="用户昵称"
            name="nickname"
            :rules="[{ required: true, message: '请输入用户昵称!' }]"
        >
          <a-input v-model:value="formState.nickname"/>
        </a-form-item>

        <a-form-item
            label="用户密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password"/>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100%" size="large">立即注册</a-button>
        </a-form-item>

        <a-form-item name="remember" style="text-align: right">
          <a-button type="link" @click="isRegister = false">已有有账号，去登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import axios from 'axios'
import { message } from 'ant-design-vue';

let router = useRouter();
const formState = reactive({
  username: '',
  password: '',
  remember: true,
});
const onLogin = async values => {
  const {data} = await axios.post('http://localhost:9763/system/member/memberLogin', {
    account: values.account,
    password: values.password
  })
  console.log(data.data)
  if (data.data) {
    localStorage.setItem('userInfo', JSON.stringify(data.data), 60 * 30 * 1000)
    router.push({name: 'Home'})
  } else {
    message.error('账号或密码不正确!');
  }
};


const onRegister = async values => {
  const {data} = await axios.post('http://localhost:9763/system/member', {
    account: values.account,
    nickname: values.nickname,
    password: values.password
  })
  if (data.code == 200) {
    message.success('注册成功!');
  } else {
    message.error('注册失败!');
  }
}

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};


const isRegister = ref(false)

</script>


<style scoped>
.login-warp {
  padding-top: 200px;
  background-image: url("../../assets/login_back.jpg");
  height: 100vh;
}

.login-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.login-card {
  width: 500px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.73);
  padding: 50px;
  border-radius: 10px;

}
</style>
